<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>折线图节点</title>
    <style>
      #mountNode {
        background: #001528;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示如何自定义一个折线图节点
       * by 镜曦
       *
       */

      // 自定义折线图节点
      G6.registerNode('circleLine', {
        draw(cfg, group) {
          const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
          const width = size[0];
          const height = size[1];

          const baseR = 30;
          let nowAngle = 0;

          // Ref line
          let refR = baseR;
          const refInc = 10;
          for (let i = 0; i < 5; i++) {
            group.addShape('circle', {
              // attrs: style
              attrs: {
                x: 0, // 居中
                y: 0,
                r: (refR += refInc),
                stroke: 'rgba(255,255,255,0.4)',
                lineDash: [4, 4],
              },
            });
          }

          const everyIncAngle = (2 * Math.PI * (360 / 5 / 5)) / 360;
          cfg.details.forEach(cat => {
            // 计算一系列点的位置
            const postions = [];
            cat.values.forEach((item, index) => {
              const r = baseR + item;
              const xPos = r * Math.cos(nowAngle);
              const yPos = r * Math.sin(nowAngle);
              nowAngle += everyIncAngle;
              postions.push([xPos, yPos]);
              if (index === 4) {
                const r = baseR + item;
                const xPos = r * Math.cos(nowAngle);
                const yPos = r * Math.sin(nowAngle);
                postions.push([xPos, yPos]);
              }
            });
            const pathArrayL = postions.map(item => ['L', ...item]);
            // 添加连线
            const shape = group.addShape('path', {
              attrs: {
                path: [
                  ['M', 0, 0], // 上部顶点
                  ...pathArrayL,
                  ['Z'], // 封闭
                ],
                stroke: cat.color, // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
              },
            });
            // 添加标注点
            postions.forEach((pos, index) => {
              if (index !== 5) {
                const littleCircle = group.addShape('circle', {
                  // attrs: style
                  attrs: {
                    x: pos[0], // 居中
                    y: pos[1],
                    r: 2,
                    fill: 'black',
                    stroke: cat.color,
                    cursor: 'pointer',
                  },
                });
                // 加上交互动画
                littleCircle.on('mouseenter', function(evt) {
                  littleCircle.animate(
                    {
                      r: 5,
                    },
                    {
                      repeat: false,
                      duration: 200,
                    },
                  );
                });
                littleCircle.on('mouseleave', function(evt) {
                  littleCircle.animate(
                    {
                      r: 2,
                    },
                    {
                      repeat: false,
                      duration: 200,
                    },
                  );
                });
                // 设置class
                littleCircle.set('className', 'littleCircle');
              }
            });

            /*
          const shape = group.addShape('path', {
            attrs: {
              path: [
                ['M', 0, 0 ], // 上部顶点
                ['L', width / 2, 0], // 右侧点
                ['L', 0, height / 2], // 下部
                ['L', - width / 2, 0], // 左侧
                ['Z'] // 封闭
              ],
              stroke: cfg.color // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color
            }
          });
          
          */
          });

          // 添加一个和背景色相同的圆形
          group.addShape('circle', {
            // attrs: style
            attrs: {
              x: 0, // 居中
              y: 0,
              r: baseR,
              fill: cfg.centerColor,
              stroke: 'darkgray',
            },
          });
          if (cfg.label) {
            group.addShape('text', {
              // attrs: style
              attrs: {
                x: 0, // 居中
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                fill: 'white',
                fontStyle: 'bold',
              },
            });
          }
          return group;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
      });

      const data = {
        nodes: [
          {
            id: 'nodeB',
            x: 400,
            y: 150,
            label: 'Line',
            shape: 'circleLine',
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
            details: [
              { cat: 'pv', values: [20, 30, 40, 30, 30], color: '#25cbfd' },
              { cat: 'dal', values: [40, 30, 20, 30, 50], color: '#feff7b' },
              { cat: 'uv', values: [40, 30, 30, 40, 40], color: '#feab3a' },
              { cat: 'sal', values: [20, 30, 50, 20, 20], color: '#fe5766' },
              { cat: 'cal', values: [10, 10, 20, 20, 20], color: '#16c176' },
            ],
            centerColor: '#0066FF',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
